使用weex开发了两个项目，感受到了其跨平台动态性的强大；另一最直接的感受就是，作为一名前端，不能像平常那样编写css ，要不定义内联style，要不定义single-class selector，绞尽脑汁去给每个标签起className

像这样

作为前端，这样子臣妾做不到

笔者更希望能跟熟悉的味道一样

• 使用任意选择器，元素选择器、组合选择器；
• 使用继承；

像这样

味道还是熟悉的好，可是该怎么做呢？

幸好，weex提供的支持webpack打包，于是并有了编写weex-style-loader的想法

将我们平常编写的 style 转换成single class selecor style，这样就可以愉快地开发weex了

使用

安装loader

tnpm install @ali/weex-style-loader --save-dev

配合脚手架，在webpack中添加loader

loaders: [  {    test: /\.we(\?[^?]+)?$/,    loaders: ['weex-loader', '@ali/weex-style-loader']  }]

让我们看看weex-style-loader转换后的代码是否符合大爷的需求

展望

在此基础上，类似vue支持<style lang="less"></style>，就可以使用less、sass预处理器了